{extend name="Base" /}
{block name="title"}{$title}{/block}
{block name="body"}
<link rel="stylesheet" type="text/css" href="/layui/css/layui.css?{:VER}"/>
<script type='text/javascript' src='/layui/layui.js?{:VER}'></script>
{load href="/js/clipboard.min.js"}
<div class="layui-upload-drag" style="width: 100%" id="upload">
	<i class="layui-icon">&#xe67c;</i>
	<p>将文件拖拽到此处或点击这里选择图片</p>
</div>
<div class="layui-upload-list">
	<button type="button" class="layui-btn layui-btn-fluid" id="ListAction">开始上传</button>
	<table class="layui-table">
		<thead>
		<tr>
			<th>文件名</th>
			<th>预览</th>
			<th>大小</th>
			<th>状态</th>
			<th>操作</th>
			<th style="display: none"></th>
		</tr>
		</thead>
		<tbody id="List"></tbody>
	</table>
</div>
<script>
	layui.use(['upload', 'util'], function () {
		var upload = layui.upload;
		var util = layui.util;

		util.fixbar({
			bar1: "&#xe609;",
			css: {right: 25, bottom: 130},
			click: function (type) {
				if (type === 'bar1') {
					var $bbcode_val = $('input[name=bbcode]'), $htmlcode_val = $('input[name=htmlcode]');
					var $bb = {'bb': []}, $hh = {'hh': []};
					for (var b = 0; b < $bbcode_val.length; b++) {
						$bb.bb[b] = $bbcode_val[b].value;
					}
					for (var h = 0; h < $htmlcode_val.length; h++) {
						$hh.hh[h] = $htmlcode_val[h].value;
					}
					var $bbcode = $bb.bb.join("\n"), $htmlcode = $hh.hh.join("\n");
					layer.open({
						type: 1,
						title: "复制链接",
						closeBtn: 1,
						area: '950px',
						shade: 0.8,
						id: 'image_copy',
						btn: ['BB Code', 'HTML Code', '关闭'],
						btnAlign: 'c',
						content: "<div style='padding: 15px'>" +
						"<textarea class=\"layui-textarea img_copy\">" + $bbcode + "</textarea>" +
						"</div>",
						success: function () {
							$('#layui-layer1').attr("data-clipboard-target", ".img_copy");
						},
						btn1: function () {
							$('.img_copy').html($bbcode);
							return false;
						},
						btn2: function () {
							$('.img_copy').html($htmlcode);
							return false;
						}
					});
				}
			}
		});

		var cb = new Clipboard("#layui-layer1");
		cb.on("success", function (e) {
			$('.img_copy').focus().select();
			// e.clearSelection();
		});

		//多文件列表示例
		var ListView, uploadListIns;
		ListView = $('#List');
		uploadListIns = upload.render({
			elem: '#upload',
			url: '/index/test/doUpload',
			accept: 'images',
			multiple: true,
			auto: false,
			bindAction: '#ListAction',
			choose: function (obj) {
				var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
				//读取本地文件
				obj.preview(function (index, file, result) {
					var tr = $(['<tr id="upload-' + index + '">',
						'<td>' + file.name + '</td>',
						'<td><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img"></td>',
						'<td>' + (file.size / 1014).toFixed(1) + ' kb</td>',
						'<td>等待上传</td>',
						'<td>',
						'<div class="layui-btn-group">',
						'<button class="layui-btn layui-btn-mini reload layui-hide">重传</button>',
						'<button class="layui-btn layui-btn-mini layui-btn-danger delete">删除</button>',
						'</div>',
						'</td>',
						'<td style="display: none"></td>',
						'</tr>'].join(''));

					//单个重传
					tr.find('.reload').on('click', function () {
						obj.upload(index, file);
					});

					//删除
					tr.find('.delete').on('click', function () {
						delete files[index]; //删除对应的文件
						tr.remove();
						uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
					});

					ListView.append(tr);
				});
			},
			done: function (res, index, upload) {
				var o = JSON.parse(res.data), img = o.image.url;
				if (o.status_code === 200) { //上传成功
					var tr = ListView.find('tr#upload-' + index), tds = tr.children();
					tds.eq(3).html('<span style="color: #5FB878;">上传成功</span>');
					tds.eq(4).html(''); //清空操作
					tds.eq(5).html("<input name='bbcode' value='[img]" + img + "[/img]'/><input name='htmlcode' value='<img src=\"" + img + "\"/>'/>");
					return delete this.files[index]; //删除文件队列已经上传成功的文件
				}
				this.error(index, upload, o.error.message);
			},
			error: function (index, upload, msg) {
				var tr = ListView.find('tr#upload-' + index), tds = tr.children();
				tds.eq(3).html('<span style="color: #FF5722;">' + msg + '</span>');
				tds.eq(4).find('.reload').removeClass('layui-hide'); //显示重传
			}
		});
	});
</script>
{/block}